<template>
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <el-breadcrumb>
      <el-breadcrumb-item>人员管理</el-breadcrumb-item>
      <el-breadcrumb-item>监督员信息详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="default" @click="onBack" style="margin-right: 10px;">返回</el-button>
  </div>

  <el-descriptions
      class="margin-top"
      title="监督员详细信息"
      :column="1"
      border
      style="margin-top: 20px;"
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          手机号
        </div>
      </template>
      {{ supervisor.telId }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          姓名
        </div>
      </template>
      <el-input v-if="editing" v-model="editForm.realName" placeholder="请输入姓名" />
      <span v-else>{{ supervisor.realName }}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          性别
        </div>
      </template>
      <el-select v-if="editing" v-model="editForm.sex" placeholder="请选择性别">
        <el-option label="男" :value="1" />
        <el-option label="女" :value="0" />
      </el-select>
      <el-tag v-else size="small" :type="supervisor.sex === 1 ? 'primary' : 'danger'">
        {{ supervisor.sex === 1 ? '男' : '女' }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          生日
        </div>
      </template>
      <el-date-picker
          v-if="editing"
          v-model="editForm.birthday"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
      />
      <span v-else>{{ supervisor.birthday }}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          备注
        </div>
      </template>
      <el-input v-if="editing" v-model="editForm.remarks" placeholder="请输入备注" />
      <span v-else>{{ supervisor.remarks }}</span>
    </el-descriptions-item>
  </el-descriptions>

  <div style="margin-top: 20px; text-align: center;">
    <el-button
        v-if="!editing"
        type="primary"
        @click="startEditing"
    >
      编辑信息
    </el-button>
    <template v-else>
      <el-button type="danger" @click="cancelEditing">取消</el-button>
      <el-button type="success" @click="submitEdit">确认修改</el-button>
    </template>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from 'axios';

const route = useRoute();
const router = useRouter();

const supervisor = ref({
  telId: "",
  realName: "",
  birthday: "",
  sex: "",
  remarks: ""
});

const editing = ref(false);
const editForm = reactive({
  telId: "",
  realName: "",
  birthday: "",
  sex: "",
  remarks: ""
});

// 初始化数据
const initData = () => {
  const { telId, realName, birthday, sex, remarks } = route.query;
  if (telId) {
    supervisor.value = {
      telId: telId || "",
      realName: realName || "",
      birthday: birthday || "",
      sex: sex !== undefined ? Number(sex) : "", // 关键修复：转换为数字
      remarks: remarks || ""
    };
    Object.assign(editForm, supervisor.value);
  } else {
    ElMessage.error("缺少监督员标识");
    router.back();
  }
};

const startEditing = () => {
  editing.value = true;
};

const cancelEditing = () => {
  editing.value = false;
  Object.assign(editForm, supervisor.value);
};

const submitEdit = async () => {
  try {
    const params = {
      telId: editForm.telId,
      realName: editForm.realName,
      birthday: editForm.birthday,
      sex: editForm.sex,
      remarks: editForm.remarks
    };

    const response = await axios.post("/supervisor/updateSupervisor", params);

    if (response.data === 1) {
      ElMessage.success("修改成功");
      Object.assign(supervisor.value, editForm);
      editing.value = false;
    } else {
      ElMessage.error("修改失败: " + (response.data.message || "未知错误"));
    }
  } catch (error) {
    console.error("修改监督员信息失败:", error);
    ElMessage.error(`请求失败: ${error.message}`);
  }
};

onMounted(() => {
  initData();
});

const onBack = () => {
  router.back();
};
</script>

<style scoped>
.cell-item {
  font-weight: bold;
}
</style>